import { useContext, useEffect, useState } from "react";
import VoteMain from "./VoteMain";
import VoteFooter from "./VoteFooter";
import context from "../ThemeContext";
import "./vote.less";

const Vote = function () {
  const { store } = useContext(context);
  // 获取公共容器中的状态，返回的是一个对象
  const { supNum, oppNum } = store.getState();

  // 组件第一次渲染完毕后，让组件更新的方法，放置在store的事件池中
  const [num, setNum] = useState(0);

  const update = () => {
    console.log("我执行了");
    setNum(num + 1);
  };

  useEffect(() => {
    // let unsubscribe = store.subscribe(让组件更新的方法);目的是让这个组件更新
    //  + 把让组件更新的方法放在store的事件池中
    //  + 返回的unsubscribe 方法执行，可以把刚才放入事件池中的方法移除掉
    let unsubscribe = store.subscribe(update); // 当公共状态发生改变后，会触发这个函数的执行，当num改变的时候，页面更新，就可以拿到最新的状态值
    return () => {
      unsubscribe(); // 把上一次产生的销毁掉，节省空间
    };
    // unsubscribe();
  }, [num]);

  return (
    <div>
      <div>
        <div className="Topbox">
          <h2>React 是一个很好的框架</h2>
          <span>{supNum + oppNum}</span>
        </div>
        <VoteMain />
        <VoteFooter />
      </div>
    </div>
  );
};

export default Vote;
